<template>
  <view class="office-container">
    <!-- 顶部用户信息 -->
    <view class="header">
      <view class="user-info">
        <image class="avatar" src="/static/avatar.png" mode="aspectFill"></image>
        <view class="user-detail">
          <text class="name">{{ userInfo.name || '用户' }}</text>
          <text class="dept">{{ userInfo.dept || '部门' }}</text>
        </view>
      </view>
      <view class="weather">
        <text class="date">{{ currentDate }}</text>
      </view>
    </view>

    <!-- 快捷功能网格 -->
    <view class="grid-section">
      <view class="section-title">办公应用</view>
      <view class="grid-container">
        <view class="grid-item" @tap="navigateTo('todo')">
          <image class="icon" src="/static/icons/todo.png"></image>
          <text class="label">待办事项</text>
        </view>
        <view class="grid-item" @tap="navigateTo('notice')">
          <image class="icon" src="/static/icons/notice.png"></image>
          <text class="label">通知公告</text>
        </view>
        <view class="grid-item" @tap="navigateTo('document')">
          <image class="icon" src="/static/icons/document.png"></image>
          <text class="label">文档管理</text>
        </view>
        <view class="grid-item" @tap="navigateTo('meeting')">
          <image class="icon" src="/static/icons/meeting.png"></image>
          <text class="label">会议管理</text>
        </view>
        <view class="grid-item" @tap="navigateTo('report')">
          <image class="icon" src="/static/icons/report.png"></image>
          <text class="label">工作报告</text>
        </view>
        <view class="grid-item" @tap="navigateTo('approval')">
          <image class="icon" src="/static/icons/approval.png"></image>
          <text class="label">审批流程</text>
        </view>
      </view>
    </view>

    <!-- 数据概览 -->
    <view class="stats-section">
      <view class="section-title">今日概览</view>
      <view class="stats-container">
        <view class="stat-item">
          <text class="number">{{ stats.todo || 0 }}</text>
          <text class="label">待办</text>
        </view>
        <view class="stat-item">
          <text class="number">{{ stats.notice || 0 }}</text>
          <text class="label">通知</text>
        </view>
        <view class="stat-item">
          <text class="number">{{ stats.meeting || 0 }}</text>
          <text class="label">会议</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        name: '张三',
        dept: '生产部'
      },
      stats: {
        todo: 12,
        notice: 3,
        meeting: 2
      }
    }
  },
  computed: {
    currentDate() {
      const date = new Date()
      const month = date.getMonth() + 1
      const day = date.getDate()
      const weekDays = ['日', '一', '二', '三', '四', '五', '六']
      const weekDay = weekDays[date.getDay()]
      return `${month}月${day}日 星期${weekDay}`
    }
  },
  methods: {
    navigateTo(type) {
      const routes = {
        todo: '/pages/office/todo/list',
        notice: '/pages/office/notice/list',
        document: '/pages/office/document/list',
        meeting: '/pages/office/meeting/list',
        report: '/pages/office/report/list',
        approval: '/pages/office/approval/list'
      }
      uni.navigateTo({
        url: routes[type]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.office-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 30rpx;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
}

.user-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.user-detail {
  display: flex;
  flex-direction: column;
}

.name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.dept {
  font-size: 24rpx;
  color: #666;
}

.date {
  font-size: 28rpx;
  color: #999;
}

.grid-section,
.stats-section {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30rpx;
}

.grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30rpx;
  border-radius: 20rpx;
  background: #f8f8f8;
}

.grid-item .icon {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 20rpx;
}

.grid-item .label {
  font-size: 28rpx;
  color: #666;
}

.stats-container {
  display: flex;
  justify-content: space-around;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-item .number {
  font-size: 48rpx;
  font-weight: bold;
  color: #007aff;
  margin-bottom: 10rpx;
}

.stat-item .label {
  font-size: 24rpx;
  color: #999;
}
</style>
